<template>
  <div class="banner-wrap">
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="(lunboImg,index) in bannerlist" :key="index">
        <a href="javascript:void(0)"><img :src="lunboImg.image" /></a>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      bannerlist: state => state.bannerlist
    })
  }
}
</script>

<style lang="scss">
.banner-wrap{
  width: 1920px;
  height: 598px;
  position: relative;
  left: 50%;
  margin-left:-960px;
  .el-carousel__container{
    height: 598px !important;
    .el-carousel__arrow{
      width: 60px;
      height: 150px;
      background:none;
      border-radius: 0;
      i.el-icon-arrow-left{
        font-size: 0;
        &::after{
          content: '';
          position: absolute;
          right: -10px;
          top: 50px;
          width:45px;
          height: 40px;
          border-right: 2px solid #fff;
          border-bottom: 2px solid #fff;
          transform: rotate(120deg) skew(150deg);
          -webkit-transform: rotate(120deg) skew(150deg);
        }
      }
      i.el-icon-arrow-right{
        font-size: 0;
        &::after{
          content: '';
          position: absolute;
          left: -10px;
          top: 50px;
          width:45px;
          height: 40px;
          border-left: 2px solid #fff;
          border-top: 2px solid #fff;
          transform: rotate(120deg) skew(150deg);
          -webkit-transform: roWtate(120deg) skew(150deg);
        }
      }
    }
  }
}
</style>
